<template>
	<view class="complaint-box">
		<view class="content-null" v-if="complaintList.length > 0">
			<image :src="$imgUrl + '/personal/no-data-icon.png'" mode=""></image>
		</view>
		<view class="content-list" v-else>
			<scroll-view
				scroll-y="true" 
				refresher-enabled="true"
			    @refresherrefresh="onRefresh"
				style="height: 100%"
			>
				<view class="complaint-list-item" v-for="(item, index) in 5" :key="index">
					<view class="complaint-list-item-label flex">
						<view>投诉时间:</view>
						<view>2023.05.05 09:00</view>
					</view>
					<view class="complaint-list-item-label">
						<view>投诉内容:</view>
						<view>这是一个说明这是一个说明这是一说明这是一个说明这是一个说明这是一个说明这是一个说明</view>
					</view>
					<view class="complaint-list-item-label">
						<view>投诉图片:</view>
						<image :src="$imgUrl + '/logo.png'" mode=""></image>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const complaintList = reactive([])
const onRefresh = () => {
	
}
</script>
<style>
	page{
		height: 100%;
	}
</style>
<style lang="scss" scoped>
	.complaint-box{
		height: 100%;
		.content-null{
			height:100%;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 223rpx;
				height: 240rpx;
			}
		}
		.complaint-list-item{
			padding: 32rpx;
			margin: 32rpx;
			border-radius: 8rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 6rpx 32rpx  rgba(0, 0, 0, 0.03);
			.complaint-list-item-label{
				&>view:nth-of-type(1){
					font-size: 32rpx;
					color: rgba(153, 153, 153, 1);
				}
				&>view:nth-of-type(2){
					font-size: 32rpx;
					color: rgba(0, 0, 0, 1);
					margin-left: 10rpx;
					flex: 1;
				}
				image{
					width: 364rpx;
					height: 214rpx;
					border-radius: 8rpx;
				}
			}
			.flex{
				display: flex;
			}
		}
	}
</style>